<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: wiz
 * @Date: 2023-06-19 08:07:01
 * @LastEditors: wiz
 * @LastEditTime: 2023-08-20 18:38:06
-->
<template>
  <div id="navigator" v-show="isShow">
    <div class="pannel-title">{{ $srv.getI18nByValue('导航器') }}</div>
    <div :id="G_containerID" class="minimap" ref="minimap"></div>
    <div id="zoom-slider">
      <!-- <a class="zoom-dropdown-btn ant-dropdown-trigger" href="#">
        100 %
        <i class="anticon anticon-down"></i>
      </a> -->
    </div>
  </div>
</template>

<script lang="ts">
import G6 from '@antv/g6';

import { Tsrv, T_srv, ts, ifs, vue } from '../config';

@T_srv.comp
export default class ruleGraphMinimap extends vue {
  // 父组件compBoxInfo
  @T_srv.prop({
    required: true,
    type: Object,
    default: null
  })
  compBoxInfo: ifs.I_compBoxInfo;

  @T_srv.prop({
    required: false,
    type: Boolean,
    default: false
  })
  isShow: boolean;

  private G_minimap: any = null;

  private GT_compBox: ifs.I_compBox;

  private G_compID: string;

  private G_containerID: string;

  private GT_compBoxInfo: ifs.I_compBoxInfo;

  created() {
    this.GT_compBoxInfo = this.compBoxInfo;
    this.GT_compBox = this.GT_compBoxInfo.TcompBox;
    this.G_compID = this.GT_compBoxInfo.compID;
    this.G_containerID = `${this.G_compID}_minimap`;
    const cfgs = {
      container: this.G_containerID
    };
    this.G_minimap = new G6.Minimap({ ...cfgs });

    this.GT_compBox.addCompMergeName(this.G_compID, 'minimap', this);
    this.$bus.$on(`${this.G_compID}_graphCreated}`, (P_graph: any) => {
      P_graph.addPlugin(this.G_minimap);
    });
  }

  destroyed() {
    this.GT_compBox.removeCompMergeName(this.G_compID, 'minimap');
  }
}
</script>
<style scoped>
#navigator {
  width: 200px;
  height: 176px;
  position: absolute;
  /* bottom: 0px; */
  right: 0px;
  z-index: 2;
}
.minimap {
  border: 1px solid #f40;
  background: #fff;
}
.pannel-title {
  height: 32px;
  border-top: 1px solid #dce3e8;
  border-bottom: 1px solid #dce3e8;
  background: #ebeef2;
  color: #000;
  line-height: 28px;
  padding-left: 12px;
}
</style>
